<template>
  <el-row style="margin: 10px">
    <el-col :span="12">
      <el-button type="primary" @click="">新增</el-button>
      <el-button :disabled="isCanDelete" type="primary" @click="">删除</el-button>
    </el-col>
  </el-row>
  <el-row style="margin: 10px">
    <el-col :span="24">
      <el-table
          :data="bomList"
          stripe
          border
          @selection-change="handleSelectionChange"
          style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column
            fixed="left"
            prop="id"
            label="ID"/>
        <el-table-column
            fixed="left"
            prop="childMaterial.code"
            label="BOM物料编号"/>
        <el-table-column
            fixed="left"
            prop="childMaterial.name"
            label="BOM物料名称"/>
        <el-table-column
            fixed="left"
            prop="childMaterial.specification"
            label="规格型号"/>
        <el-table-column
            prop="childMaterial.unit.name"
            label="单位">
        </el-table-column>
        <el-table-column
            prop="childMaterial.category.name"
            label="物料/产品">
        </el-table-column>
        <el-table-column
            prop="quantity"
            label="预计使用量">
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="scope">
            <el-button size="small" @click="">编辑</el-button>
            <el-button
                size="small"
                type="danger"
                @click=""
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
<!--  分页  -->
  <el-row style="margin: 10px">
    <el-col :span="24">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[2, 4, 6, 8]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-col>
  </el-row>

</template>

<script setup>

import {onMounted, reactive, ref, watch} from "vue";
import {getBomPage} from "@/api/bom.js"

const bomList = ref([])
const bomRows = ref([])
//批量删除按钮控制
const isCanDelete = ref(false);
const props = defineProps({
  parentMaterialId: {
    type: Number
  }
})
watch(()=>props.parentMaterialId,(newValue,oldVale)=>{
  if (newValue){
    handleSearch();
  }
})
// 分页信息
const currentPage = ref(1)
const pageSize = ref(2)
const total = ref(0)

//已选择的数据变化
const handleSelectionChange = (srs)=>{
  bomRows.value = [];
  srs.forEach(row=>{
    bomRows.value.push(row);
  })
  console.log(bomRows.value)
  if(bomRows.value.length > 0){
    isCanDelete.value = false;
  }else{
    isCanDelete.value = true;
  }
}
const  handleSearch = ()=>{
  //bomList数据加载
  getBomPage(currentPage.value,pageSize.value,props.parentMaterialId.valueOf()).then(res=>{
    bomList.value =res.data.list;
    total.value = res.data.total;
    console.log(bomList.value)
  })
}
// 处理分页大小变化
const handleSizeChange = (val) => {
  pageSize.value = val
  handleSearch();
}

// 处理当前页变化
const handleCurrentChange = (val) => {
  currentPage.value = val
  handleSearch();
}
//挂载
onMounted( ()=>{
  if (props.parentMaterialId) {
    handleSearch();
  }
})
</script>

<style scoped>

</style>